{% extends "base.html" %}

{% block title %}预约停车位 - 车辆管理系统{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h4 class="mb-0">预约停车位</h4>
                </div>
                <div class="card-body">
                    {% if not vehicles %}
                        <div class="alert alert-warning">
                            您还没有添加车辆，请先添加车辆才能预约停车位。
                            <a href="{{ url_for('add_vehicle') }}" class="alert-link">点击这里添加车辆</a>.
                        </div>
                    {% else %}
                        <form action="{{ url_for('reserve_parking') }}" method="post">
                            <div class="mb-3">
                                <label for="vehicle_id" class="form-label">选择车辆</label>
                                <select class="form-select" id="vehicle_id" name="vehicle_id" required>
                                    <option value="" selected disabled>请选择车辆</option>
                                    {% for vehicle in vehicles %}
                                        <option value="{{ vehicle.id }}">{{ vehicle.plate_number }} ({{ vehicle.vehicle_type }} - {{ vehicle.color }})</option>
                                    {% endfor %}
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="parking_lot_id" class="form-label">选择停车场</label>
                                <select class="form-select" id="parking_lot_id" name="parking_lot_id" required>
                                    <option value="" selected disabled>请选择停车场</option>
                                    {% for lot in parking_lots %}
                                        <option value="{{ lot.id }}" {% if lot.available_spaces <= 0 %}disabled{% endif %} 
                                                data-spaces="{{ lot.available_spaces }}" 
                                                data-total="{{ lot.total_spaces }}"
                                                data-rate="{{ lot.hourly_rate }}">
                                            {{ lot.name }} - 
                                            {% if lot.available_spaces > 0 %}
                                                可用车位: {{ lot.available_spaces }}/{{ lot.total_spaces }}
                                            {% else %}
                                                已满
                                            {% endif %}
                                        </option>
                                    {% endfor %}
                                </select>
                                <div id="parking-info" class="form-text mt-2 d-none">
                                    <div class="card">
                                        <div class="card-body py-2">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <strong>可用车位:</strong> <span id="available-spaces">-</span>/<span id="total-spaces">-</span>
                                                </div>
                                                <div class="col-md-6">
                                                    <strong>费率:</strong> ¥<span id="hourly-rate">-</span>/小时
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="reservation_time" class="form-label">预约时间</label>
                                <input type="datetime-local" class="form-control" id="reservation_time" name="reservation_time" required>
                                <div class="form-text">请选择您计划到达停车场的时间，预约有效期为所选时间后的2小时内</div>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">预约停车位</button>
                                <a href="{{ url_for('user_dashboard') }}" class="btn btn-secondary">返回仪表板</a>
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 设置预约时间默认值为当前时间
        const now = new Date();
        const offset = now.getTimezoneOffset() * 60000; // 毫秒偏移量
        const localTime = new Date(now.getTime() - offset);
        const localTimeStr = localTime.toISOString().slice(0, 16);
        document.getElementById('reservation_time').value = localTimeStr;
        
        // 显示停车场信息
        const parkingSelect = document.getElementById('parking_lot_id');
        const parkingInfo = document.getElementById('parking-info');
        const availableSpaces = document.getElementById('available-spaces');
        const totalSpaces = document.getElementById('total-spaces');
        const hourlyRate = document.getElementById('hourly-rate');
        
        parkingSelect.addEventListener('change', function() {
            const selectedOption = this.options[this.selectedIndex];
            if (selectedOption.value) {
                availableSpaces.textContent = selectedOption.dataset.spaces;
                totalSpaces.textContent = selectedOption.dataset.total;
                hourlyRate.textContent = selectedOption.dataset.rate;
                parkingInfo.classList.remove('d-none');
            } else {
                parkingInfo.classList.add('d-none');
            }
        });
    });
</script>
{% endblock %} 